<template>
    <div class='confirmPay'>
        <el-dialog :title="title" visible @close="$emit('close')" width="1200px" append-to-body
            :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="formLoading">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="优惠券标题:" prop="title">
                            <el-input style="width:215px;" v-model="form.title" placeholder="请输入优惠券标题" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="优惠券类型:" prop="type">
                            <el-select v-model="form.type" placeholder="请选择" clearable size="small">
                                <el-option v-for="dict in couponType" :key="dict.dictValue" :label="dict.dictLabel"
                                    :value="dict.dictValue" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="优惠类型:" prop="offer_type">
                            <el-select v-model="form.offer_type" placeholder="请选择" clearable size="small">
                                <el-option v-for="dict in offerType" :key="dict.dictValue" :label="dict.dictLabel"
                                    :value="dict.dictValue" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" v-if="form.offer_type == 1 || form.offer_type == 3">
                        <el-form-item label="立减金额:" prop="offer_amount" required>
                            <el-input style="width:215px;" v-model="form.offer_amount" placeholder="请输入立减金额" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" v-if="form.offer_type == 3 || form.offer_type == 4">
                        <el-form-item label="满足金额:" prop="bottom_amount" required>
                            <el-input style="width:215px;" v-model="form.bottom_amount" placeholder="请输入满足金额" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" v-if="form.offer_type == 2 || form.offer_type == 4">
                        <el-form-item label="打折比例:" prop="offer_prop" required>
                            <el-input style="width:215px;" v-model="form.offer_prop" placeholder="请输入打折比例" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="有效期类型:" prop="vali_type">
                            <el-select v-model="form.vali_type" placeholder="请选择" clearable size="small">
                                <el-option v-for="dict in validType" :key="dict.dictValue" :label="dict.dictLabel"
                                    :value="dict.dictValue" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.vali_type == 1">
                        <el-form-item label="有效期：" prop="range" style="margin-right:25px;" required>
                            <el-date-picker v-model="form.range" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                                placeholder="请选择时间范围" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.vali_type == 2">
                        <el-form-item label="有效时长:" prop="vali_durat" required>
                            <el-input style="width:215px;" v-model="form.vali_durat" placeholder="请输入有效时长">
                                <i slot="suffix"
                                    style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">天</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="优惠券数量:" prop="number_type">
                            <el-select v-model="form.number_type" placeholder="请选择" clearable size="small">
                                <el-option v-for="dict in numberType" :key="dict.dictValue" :label="dict.dictLabel"
                                    :value="dict.dictValue" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="优惠劵剩余数量:" prop="name">
                            <el-input style="width:215px;" v-model="form.name" placeholder="请输入姓名" />
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="24">
                        <el-form-item label="优惠劵描述:" prop="content">
                            <editor v-model="form.content" placeholder="请输入优惠劵描述" :height="200" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </span>
            <!-- <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" /> -->
        </el-dialog>
    </div>
</template>
<script>
import throttle from 'lodash.throttle'
import { setCouponsInfo } from "@/api/coupon/coupon"
import editor from '@/components/Editor/index'
export default {
    name: 'confirmPay',
    props: {
        title: String,
        data: {
            type: Object,
            default: function () {
                return {}
            }
        }

    },
    components: {
        editor,
    },
    data() {
        return {
            offerType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无条件立减',
                    dictValue: 1
                }, {
                    dictLabel: '无条件打折',
                    dictValue: 2
                },
                {
                    dictLabel: '满减优惠',
                    dictValue: 3
                }, {
                    dictLabel: '满折优惠',
                    dictValue: 4
                }
            ],
            validType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无限期',
                    dictValue: 0
                }, {
                    dictLabel: '时间区间',
                    dictValue: 1
                },
                {
                    dictLabel: '有效期',
                    dictValue: 2
                }
            ],
            numberType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无限量',
                    dictValue: 0
                }, {
                    dictLabel: '数量有限',
                    dictValue: 1
                }
            ],
            couponType: [{
                dictLabel: '商品优惠券',
                dictValue: 1
            }],
            loading: false,
            formLoading: false,
            form: {
                order_no: this.orderNo,
                range: [],
                offer_prop: '',
            },
            rules: {
                title: [{ required: true, message: '请输入优惠券标题', trigger: 'blur' }],
                type: [{ required: true, message: '请选择优惠券类型', trigger: 'blur' }],
                offer_type: [{ required: true, message: '请选择优惠类型', trigger: 'blur' }],
                vali_type: [{ required: true, message: '请选择有效期类型', trigger: 'blur' }],
                number_type: [{ required: true, message: '请选择优惠券数量类型', trigger: 'blur' }],
            },

        }
    },
    created() {
        if (this.data) {
            console.log(this.data, "表单数据")
            this.form = { ...this.form, ...this.data }
            if (this.data.vali_time_start && this.data.vali_time_end) {
                this.form.range[0] = this.data.vali_time_start
                this.form.range[1] = this.data.vali_time_end
            }
        }

    },
    methods: {
        // getOfferType(){

        // },
        onEditorChange({ editor, html, text }) {
            this.form.content = html;
            // console.log(this.form.content)
        },
        close() {
            this.form = {};
            this.$emit('close');
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    this.form.vali_time_start = this.form.range.length > 0 ? this.form.range[0] : null;
                    this.form.vali_time_end = this.form.range.length > 0 ? this.form.range[1] : null;
                    if (this.data) {
                        this.form.coupon_id = this.data.id
                    }
                    if (this.form.offer_type == 1 || this.form.offer_type == 3) {
                        this.form.offer_prop = 0
                    }
                    if (this.form.offer_type == 2 || this.form.offer_type == 4) {
                        this.form.offer_amount = null
                    }
                    if (this.form.offer_type == 1 || this.form.offer_type == 2) {
                        this.form.bottom_amount = null
                    }
                    setCouponsInfo(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.form = {}
                        this.formLoading = false;
                        this.$emit('load')
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false })
    },
}

</script>
<style scoped lang='scss'></style>